<template>
  <div class="main_box">
    <div class="main_top">
      <!-- <span><img src="@/assets/img/homwAnalyse/gohome.png" alt=""><b>回到首页</b></span> -->
      <p>一体化应用决策分析中心-齐贤镇</p>
    </div>
    <div class="main_con clearfix">
      <div class="main_con_left">
        <div class="con_l_top">
          <div class="con_left_top">
            <img src="@/assets/img/homwAnalyse/line chart.png" alt="">
            <h3>各村居拨付金额</h3>
            <!-- <div class="con_plan">
              <span></span>
              <b>预算数</b>
            </div>
            <div class="con_new">
              <span></span>
              <b>已拨付</b>
            </div> -->
          </div>
          <div id="con_left" />
        </div>
      </div>
      <div class="main_con_midle">
        <div class="con_midle_top">
          <div v-for="item in top_list" :key="item.id" class="sum_plan">
            <p>{{ item.value }}</p>
            <span>{{ item.text }}</span>
          </div>
        </div>
        <div class="con_midle_map" />
      </div>
      <div class="main_con_right">
        <div class="con_right_bot">
          <div class="list_top">
            <img src="@/assets/img/homwAnalyse/bar chart.png" alt="">
            <h3>项目列表</h3>
            <div class="list_details">查看详情</div>
          </div>
          <div class="list" @click="goroute">
            <el-table
              :data="tableData"
              :row-class-name="tableRowClassName"
              :header-cell-style="{ background: 'rgba(91,143,249,0.35)' }"
              height="756"
            >
              <el-table-column prop="proGramGroupName" label="项目名称" />
              <el-table-column prop="proGramMoney" label="预算数" />
              <el-table-column prop="proGramPMoney" label="拨付数" />
              <el-table-column prop="rateMoney" label="资金使用率">
                <template slot-scope="datalist">
                  <span>{{ Math.floor(datalist.row.proGramPMoney/datalist.row.proGramMoney*100) }}%</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :total="50"
                :background="true"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import echarts from "echarts ";
import { dataList } from './tableData.js';
const echarts = require('echarts/lib/echarts');

// 引入柱状图组件
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');

export default {
  data() {
    return {
      top_list: [
        {
          id: 1,
          value: '15,423',
          text: '总预算数(万元)'
        },
        {
          id: 2,
          value: '6,169',
          text: '已拨付金额(万元)'
        },
        {
          id: 3,
          value: '9,254',
          text: '剩余可拨付(万元)'
        },
        {
          id: 4,
          value: '176',
          text: '总项目数(个)'
        },
        {
          id: 5,
          value: '105',
          text: '专项项目(个)'
        },
        {
          id: 6,
          value: '36',
          text: '一卡通(个)'
        },
        {
          id: 7,
          value: '176',
          text: '总项目数(个)'
        },
        {
          id: 8,
          value: '12',
          text: '基本支出(个)'
        },
        {
          id: 9,
          value: '23',
          text: '公用经费(个)'
        }
      ],
      tableData: dataList,
      rightTopList: [
        {
          id: 1,
          title: '人员经费',
          num: '108,897'
        },
        {
          id: 2,
          title: '公用经费',
          num: '133,566'
        },
        {
          id: 3,
          title: '工程款',
          num: '177,886'
        },
        {
          id: 4,
          title: '村居补助',
          num: '99,237'
        },
        {
          id: 5,
          title: '代管资金',
          num: '243,968'
        },
        {
          id: 6,
          title: '专项支出',
          num: '196,545'
        },
        {
          id: 7,
          title: '上级转移支付资金',
          num: '323,335'
        },
        {
          id: 8,
          title: '拆迁补偿补偿方面',
          num: '343,112'
        }
      ]
    };
  },
  // created() {
  //   this.$nextTick(() => {
  //     this.get_con_left();
  //   });
  // },

  mounted() {
    this.get_con_left();
    this.get_line_chart();
    // let _this = this;
    // window.onresize = function() {
    //   _this.myChart.resize();
    // };
  },
  methods: {
    goroute() {
      this.$router.push('/tkzqz/eemfk?isShow=true');
    },
    get_con_left() {
      var myChart = echarts.init(document.getElementById('con_left'));
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   data: ["预算数", "已拨付"],
        // },
        grid: {
          left: '0',
          right: '4%',
          bottom: '25px',
          top: '12px',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#0169D4'
            }
          },
          textStyle: {
            fontSize: '18'
          },

          type: 'category',
          data: [
            '迎驾桥',
            '阳嘉龙',
            '兴浦',
            '镜湖',
            '齐贤',
            '八字桥',
            '兴齐',
            '群贤',
            '光明',
            '曙光',
            '朝阳',
            '增大',
            '陶里',
            '丈午',
            '官湖沿',
            '柯北',
            '下方桥',
            '梅林'
          ]
        },
        series: [
          {
            name: '预算数',
            type: 'bar',
            data: [
              170028878,
              157055226.84,
              204168047.25,
              205959852.42,
              49754757.57,
              73770844.95,
              170028878.66,
              73915721.74,
              164502574,
              123384292.36,
              66847497.98,
              170028878,
              170028878,
              263442679.29,
              90610919.3,
              90610919.3,
              90610919.3,
              170028878
            ],
            itemStyle: {
              normal: {
                color: '#0169D4'
              }
            }
          }
          // {
          //   name: "已拨付",
          //   type: "bar",
          //   data: [45, 58, 20, 28, 45, 23, 52, 60, 30, 10, 62, 70, 61, 13],
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: "#93eed2",
          //         },
          //         {
          //           offset: 1,
          //           color: "#5ad8a6",
          //         },
          //       ]),
          //     },
          //   },
          // },
        ]
      });
    },
    get_line_chart() {
      var myChart = echarts.init(document.getElementById('midle_bot'));
      myChart.setOption({
        grid: {
          left: '25px',
          right: '23px',
          bottom: '25px',
          top: '12px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: {
          type: 'value',
          max: 1000,
          min: 0,
          minInterval: 250,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            data: [
              500,
              480,
              890,
              934,
              510,
              590,
              1000,
              610,
              110,
              0,
              0,
              250,
              190
            ],
            type: 'line',
            areaStyle: {
              normal: {
                color: '#0169D4',
                opacity: '0.4'
              }
            },
            symbol: 'none',
            lineStyle: {
              color: '#0169D4'
            }
          }
        ]
      });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'name-row';
      } else if (rowIndex % 2 === 1) {
        return 'plan-row';
      }
      return '';
    },
    handleCurrentChange(val) {
      this.tableData.forEach(item => {
        item.plan = `${val},888,888`;
        item.num = `${val},99432.34`;
        item.money = val * 10 + 36.67 + '%';
      });
    }
  }
};
</script>
<style lang="scss" scoped>
p,h3 {
  margin: 0;
}
.main_box {
  background: rgba(91,143,249,0.07);
  padding-bottom: 23px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  .main_top {
    span {
      display: inline-block;
      // width: 193px;
      // height: 40px;
      border: 1px solid #1890ff;
      border-radius: 3px;
      // background: url(@/assets/img/homwAnalyse/gohome.png) 53px center no-repeat;
      b {
        display: inline-block;
        // width: 64px;
        // height: 24px;
        font-family: PingFangSC, PingFangSC-Medium;
        color: #1890ff;
        line-height: 24px;
      }
    }
    p {
      height: 79px;
      font-size: 32px;
      line-height: 79px;
      text-align: center;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #576a95;
    }
  }
}
.main_con {
  display: flex;
  justify-content: space-around;
  width: 100%;
  .main_con_left {
    width: 25%;
    // height: 887px;
    height: 100%;
    margin-left: 5px;
    .con_l_bot {
      margin-top: 24px;
      display: flex;
      .con_right_subsidy {
        margin-right: 16px;
        width: 210px;
        height: 204px;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 20px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        padding-left: 25px;
        .subsidy_top {
          margin: 14px 0 ;
          // img {
          //   // vertical-align: middle;
          // }
          h3 {
            display: inline-block;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC, PingFangSC-Medium;
            line-height: 25px;
            margin-left: 7px;
            vertical-align: middle;
            color: #333333;
          }
        }
      .subsidy{
        display: flex;
        height: calc(100% - 53px);
        justify-content: space-around;
        flex-direction: column;
      }
        .subsidy_midle {
          .subsidy_midle_left {
            display: inline-block;
            margin-left: 16px;
            h3 {
              height: 28px;
              font-size: 20px;
              font-family: DINCondensed, DINCondensed-Bold;
              font-weight: 700;
              color: #576a95;
              line-height: 28px;
            }
            p {
              height: 20px;
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Medium;
              font-weight: 500;
              color: #999999;
              line-height: 20px;
            }
          }
        }
      }
    }

    .con_l_top {
      width: calc(100% - 25px);       padding-bottom: 25px;
      height:895px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      padding-left: 5px;
    }
    .con_left_top {
      position: relative;
      padding: 23px 0 0 26px;
      height: 44px;
      img {
        width: 15px;
        height: 14px;
        vertical-align: middle;
      }
      h3 {
        display: inline-block;
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        line-height: 25px;
        margin-left: 6px;
        vertical-align: middle;
        color: #4ca7ed;
      }
      .con_plan {
        position: absolute;
        right: 26px;
        top: 3px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: linear-gradient(90deg, #94c2fd, #5b8ff9) r;
        }
        b {
          display: inline-block;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          line-height: 17px;
          margin-left: 8px;
          color: #8c8c8c;
        }
      }
      .con_new {
        position: absolute;
        right: 26px;
        top: 24px;
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: linear-gradient(90deg, #93eed2, #5ad8a6);
        }
        b {
          display: inline-block;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          line-height: 17px;
          margin-left: 8px;
          color: #8c8c8c;
        }
      }
    }
  }
  .main_con_midle {
    position: relative;
    // height: 880px;
    height: 100%;
    width: 50%;
    .con_midle_top {
      display: flex;
      width: 95%;
      height: 340px;
      align-content: space-around;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-left: 6px;
      .sum_plan {
        width: 30%;
        height: 102px;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 20px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        padding-top: 21px;
        text-align: center;
        p {
          text-align: center;
          height: 38px;
          font-size: 36px;
          font-family: DINCondensed, DINCondensed-Bold;
          font-weight: 700;
          color: #0051ad;
          line-height: 38px;
        }
        span {
          display: inline-block;
          height: 22px;
          font-family: PingFangSC, PingFangSC-Medium;
          color: #4ca7ed;
          line-height: 22px;
          margin-top: 5px;
        }
      }
    }
    .con_midle_map {
      width: 100%;
      height: 583px;
      background: url(../../assets/img/homwAnalyse/map_bj2.png);
      background-size: 100% 100%;
      margin-top: 8px;
    }
    .con_midle_bot {
      // position: absolute;
      // bottom: 0;
      // left: 24px;
      width: 100%;
      height: 204px;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      .midle_bot_top {
        height: 54px;
        padding: 23px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          line-height: 25px;
          margin-left: 5pc;
          vertical-align: middle;
        }
      }
    }
  }
  .main_con_right {
    height: 100%;
    width:25%;
    .con_right_top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      height: 258px;
      align-items: center;
      .right_t_list {
        width: 140px;
        height: 78px;
        border-radius: 8px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        &:hover {
          p {
            color: #fff;
            background: rgba(1, 105, 212, 0.8);
          }
          span {
            color: #fff;
            background: rgba(1, 105, 212, 0.65);
          }
        }
        p {
          padding-left: 8px;
          color: #4ca7ed;
          height: 32px;
          line-height: 32px;
          background: rgba(255, 255, 255, 0.65);
          border-radius: 8px 8px 0px 0px;
        }
        span {
          padding-left: 8px;
          display: block;
          height: 46px;
          line-height: 46px;
          color: #0051ad;
          font-size: 24px;
          font-weight: bold;
          background: rgba(91, 143, 249, 0.07);
        }
      }
      .right_old_list {
        width: 216px;
        height: 78px;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 8px;
        box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
        &:hover {
          p {
            color: #fff;
            background: rgba(1, 105, 212, 0.8);
          }
          span {
            color: #fff;
            background: rgba(1, 105, 212, 0.65);
          }
        }
        p {
          padding-left: 8px;
          color: #4ca7ed;
          height: 32px;
          line-height: 32px;
          background: rgba(255, 255, 255, 0.65);
          border-radius: 8px 8px 0px 0px;
        }
        span {
          padding-left: 8px;
          display: block;
          height: 46px;
          line-height: 46px;
          color: #0051ad;
          font-size: 24px;
          font-weight: bold;
          background: rgba(91, 143, 249, 0.07);
        }
      }
    }
    .con_right_bot {
      width: 100%;
      height: 895px;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      .list_top {
        position: relative;
        height: 79px;
        padding: 23px 0 0 26px;
        img {
          vertical-align: middle;
        }
        h3 {
          display: inline-block;
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          line-height: 25px;
          margin-left: 4px;
          vertical-align: middle;
          color: #4ca7ed;
        }
        .list_details {
          position: absolute;
          top: 23px;
          right: 17px;
          width: 88px;
          height: 32px;
          border: 1px solid #1890ff;
          border-radius: 3px;
          text-align: center;
          line-height: 32px;
          color: #1890ff;
          font-size: 14px;
        }
      }
      .list {
        padding-left: 12px;
        height: calc(100% - 79px);
        /deep/.el-table td,
        /deep/.el-table th {
          text-align: center;
          height: 54px;
          border-bottom: none;
        }
        /deep/.el-table__header-wrapper tr {
          background: #0169d4;
          color: #ffffff;
        }
        /deep/.el-table .name-row {
          background: rgba(255, 255, 255, 0.1);
          color: #0169d4;
        }

        /deep/.el-table .plan-row {
          background: rgba(1, 105, 212, 0.4);
          color: #0169d4;
        }

        .block {
          margin-top: 10px;
          float: right;
          /deep/.el-pagination.is-background .el-pager li:not(.disabled),
          /deep/.el-pagination.is-background .btn-next,
          /deep/.el-pagination.is-background .btn-prev:disabled {
            background-color: transparent; // 进行修改未选中背景和字体
          }
          /deep/.el-pagination.is-background
            .el-pager
            li:not(.disabled).active {
            background-color: #5b8ff9; // 进行修改选中项背景和字
          }
        }
      }
    }
  }
}
#con_left {
  width: 100%;
  height: 100%;
}

#midle_bot {
  width: 100%;
  height: calc(100% - 54px);
}
/deep/.el-table {
  width: 100%;
  height: 756px;
}
</style>
